<template>
  <view>
    <view class="group_2 flex-row">
      <image class="image_3" referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pso555a8mpcnheibp8n5zp9vtrx6z8pqf87b2b1c09-c020-4d51-9c0f-92a6ab2602b1" @click="back" />
      <text class="text_1">模板发起</text>
    </view>
    <view class="group_3 flex-col">
      <view class="text-wrapper_1 flex-row ">
        <view @click="isMy=true">
          <text class="text_2">我的模板</text>
          <view :class="isMy?'textLine':''"></view>
        </view>
        <view @click="isMy=false">
          <text class="text_3">系统模板</text>
         <view :class="!isMy?'textLine':''"></view>
        </view>
      </view>

      <view class="group_5 flex-col" v-if="isMy">
        <view class="" v-for="(item,index) in PDFInfo.records">
          <view class="section_2 flex-row justify-between" @click="detail(item)">
            <view class="image-wrapper_1 flex-col">
              <image class="label_3" referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9rrsf6hw2yprow5o3dw2f9vvyywmiirudb6138d6-c498-4129-abb9-292b81136c98" />
            </view>
            <text class="text_4">{{item.fileName.split('.')[0]||''}}</text>
          </view>
          <view class="section_3 flex-col"></view>
        </view>
        </view>
        
        <view class="group_5 flex-col" v-if="!isMy">
          <view class="" v-for="(item,index) in PDFInfo.records">
            <view class="section_2 flex-row justify-between" @click="detail(item)">
              <view class="image-wrapper_1 flex-col">
                <image class="label_3" referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9rrsf6hw2yprow5o3dw2f9vvyywmiirudb6138d6-c498-4129-abb9-292b81136c98" />
              </view>
              <text class="text_4">{{item.fileName.split('.')[0]||''}}</text>
            </view>
            <view class="section_3 flex-col"></view>
          </view>
          </view>
        
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isMy:true,//展示我的模板或系统模板
        PDFInfo:{},//存储pdf文件
      }
    },
    mounted() {
      this.getPDFInfo()
    },
    methods: {
      back(){
        uni.redirectTo({
          url:'../sign/sign'
        })
      },
      //跳转到模板详情
      detail(item) {
        uni.setStorageSync('file',item)
        uni.navigateTo({
          url: '../temDetial/temDetial',
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      //获取模板请求
      async getPDFInfo(){
        let param = {type: 5}
        let res = await this.$http('/app/v1/contract/getFileDataList','get',param)
        console.log(res)
        if(res.data.code==200){
          this.PDFInfo=res.data.data
        }else{
          uni.showToast({
            title: res.data.msg,
            duration: 1500
          })
        }
      }

    }
  }
</script>

<style scoped>
  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .group_2 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5isyyq2potdfiptqwd466gus5r8c3u9gdbda77b7-1a54-4592-a767-12fcab94e2b4) 100% no-repeat;
    background-size: 100% 100%;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .text_1 { 
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
     margin: 25rpx 301rpx 0 250rpx;
  }
.textLine{
  margin-top: 10rpx;
  width: 120rpx;
  height: 5rpx;
  background-color:  rgba(230, 215, 178, 1);
}
  .group_3 {
    background-color: rgba(242, 242, 242, 1);
    width: 750rpx;
    height: 1334rpx;
  }

  .text-wrapper_1 {
  padding: 40rpx 0 30rpx 0;  
    justify-content: space-evenly;
    
  }

  .text_2 {
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;

    margin-top: 2rpx;
    margin-bottom: 40rpx;
  }

  .text_3 {
    width: 118rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;


  }

  .group_4 {
    background-color: rgba(205, 173, 102, 1);
    border-radius: 2px;
    width: 130rpx;
    height: 4rpx;
    margin: 7rpx 0 0 220rpx;
  }

  .group_5 {
    overflow-x:hidden;
    background-color: rgba(255, 255, 255, 1);

    /* height: auto; */
    border-top: 2px solid rgba(230, 215, 178, 1);
    border-bottom: 2px solid rgba(230, 215, 178, 1);
    margin: 0 0 715rpx 0;
  }

  .section_2 {
    width: 204rpx;
    height: 67rpx;
    margin: 20rpx 0 20rpx 61rpx;
  }

  .image-wrapper_1 {
    background-image: linear-gradient(180deg,
        rgba(233, 219, 184, 1) 0,
        rgba(233, 219, 184, 1) 0,
        rgba(196, 176, 129, 1) 100%,
        rgba(196, 176, 129, 1) 100%);
    border-radius: 5px;
    height: 67rpx;
    width: 67rpx;
  }

  .label_3 {
    width: 37rpx;
    height: 34rpx;
    margin: 13rpx 0 0 14rpx;
  }

  .text_4 {
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    margin-left: 15rpx;
    margin-top: 15rpx;
  }

  .section_3 {
    background-color: rgba(230, 230, 230, 1);
    width: 630rpx;
    height: 2rpx;
    margin: 10rpx 0 0 60rpx;
  }

  .section_4 {
    width: 204rpx;
    height: 67rpx;
    margin: 30rpx 0 0 61rpx;
  }

  .image-wrapper_2 {
    background-image: linear-gradient(180deg,
        rgba(233, 219, 184, 1) 0,
        rgba(233, 219, 184, 1) 0,
        rgba(196, 176, 129, 1) 100%,
        rgba(196, 176, 129, 1) 100%);
    border-radius: 5px;
    height: 67rpx;
    width: 67rpx;
  }

  .label_4 {
    width: 37rpx;
    height: 34rpx;
    margin: 13rpx 0 0 14rpx;
  }

  .text_5 {
    width: 111rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    margin-left: 10rpx;
    margin-top: 23rpx;
  }

  .section_5 {
    background-color: rgba(230, 230, 230, 1);
    width: 630rpx;
    height: 2rpx;
    margin: 10rpx 0 0 60rpx;
  }

  .section_6 {
    width: 204rpx;
    height: 67rpx;
    margin: 24rpx 0 37rpx 61rpx;
  }

  .image-wrapper_3 {
    background-image: linear-gradient(180deg,
        rgba(233, 219, 184, 1) 0,
        rgba(233, 219, 184, 1) 0,
        rgba(196, 176, 129, 1) 100%,
        rgba(196, 176, 129, 1) 100%);
    border-radius: 5px;
    height: 67rpx;
    width: 67rpx;
  }

  .label_5 {
    width: 37rpx;
    height: 34rpx;
    margin: 13rpx 0 0 14rpx;
  }

  .text_6 {
    width: 111rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 28rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    margin-left: 10rpx;
    margin-top: 23rpx;
  }
</style>
